<template>
  <div class="cloud-snapshot-container">
    <!-- 云盘信息 -->
    <el-card class="section" shadow="hover">
      <div class="section-header">
        <div class="header-left">
          <h3 class="section-title">
            <i class="el-icon-s-operation"></i>
            云盘管理
            <el-tooltip content="为保证数据安全，请勿对机器进行分盘操作" placement="top">
              <i class="el-icon-warning warning-icon"></i>
            </el-tooltip>
          </h3>
          <div class="section-subtitle">选择云盘以查看或管理其快照</div>
        </div>
        <div class="header-right">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-refresh"
            @click="refreshDiskData"
            :loading="diskLoading"
            class="refresh-button"
          >刷新</el-button>
        </div>
      </div>

      <el-table
        ref="diskTable"
        :data="diskData"
        style="width: 100%"
        border
        v-loading="diskLoading"
        @selection-change="handleDiskSelectionChange"
        @row-click="handleRowClick"
        row-key="id"
        class="custom-table"
        highlight-current-row
      >
        <el-table-column type="selection" width="55" :reserve-selection="true"></el-table-column>
        <el-table-column
          v-for="(col, index) in visibleDiskColumns"
          :key="index"
          :prop="col.prop"
          :label="col.label"
          :min-width="col.width"
        >
          <template slot-scope="scope">
            <template v-if="col.prop === 'status'">
              <el-tag
                :type="scope.row.status === '使用中' ? 'success' : 'info'"
                size="small"
                effect="light"
                class="status-tag"
              >
                <i class="el-icon-circle-check" v-if="scope.row.status === '使用中'"></i>
                <i class="el-icon-info" v-else></i>
                {{ scope.row.status }}
              </el-tag>
            </template>
            <template v-else-if="col.prop === 'operations'">
              <el-button
                type="primary"
                size="mini"
                plain
                icon="el-icon-camera"
                @click.stop="createSnapshot(scope.row)"
                class="action-button"
              >创建快照</el-button>
            </template>
            <template v-else>
              <span class="cell-content">{{ scope.row[col.prop] }}</span>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 快照列表 -->
    <el-card class="section" shadow="hover">
      <div class="section-header">
        <div class="header-left">
          <h3 class="section-title">
            <i class="el-icon-picture"></i>
            硬盘快照
            <span class="badge" v-if="total > 0">{{ total }}</span>
          </h3>
          <div class="section-subtitle" v-if="selectedDiskRows && selectedDiskRows.length > 0">
            当前选中云盘: <span class="highlight-text">{{ selectedDiskRows[0].id }}</span>
          </div>
        </div>
        <div class="header-right">
          <div class="search-container">
            <el-input
              v-model="searchQuery"
              placeholder="搜索快照ID或名称"
              prefix-icon="el-icon-search"
              clearable
              size="small"
              class="search-input"
              @clear="handleSearchClear"
            ></el-input>
            <el-select
              v-model="statusFilter"
              placeholder="状态筛选"
              size="small"
              clearable
              @change="handleStatusFilterChange"
              class="status-filter"
            >
              <el-option label="创建中" value="creating">
                <i class="el-icon-loading"></i> 创建中
              </el-option>
              <el-option label="创建成功" value="available">
                <i class="el-icon-success"></i> 创建成功
              </el-option>
              <el-option label="创建失败" value="error">
                <i class="el-icon-error"></i> 创建失败
              </el-option>
            </el-select>
          </div>
          <div class="action-buttons">
            <el-button
              type="danger"
              size="small"
              plain
              icon="el-icon-delete"
              :disabled="!selectedSnapshots.length"
              @click="batchDeleteSnapshots"
              class="batch-delete-button"
            >批量删除</el-button>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-refresh"
              @click="refreshSnapshotData"
              :loading="snapshotLoading"
              class="refresh-button"
            >刷新</el-button>
          </div>
        </div>
      </div>

      <div class="empty-state" v-if="!snapshotData.length && !snapshotLoading">
        <i class="el-icon-picture-outline empty-icon"></i>
        <p class="empty-text">暂无快照数据</p>
        <p class="empty-subtext">请选择一个云盘或创建新的快照</p>
      </div>

      <el-table
        v-else
        :data="filteredSnapshotData"
        style="width: 100%"
        border
        v-loading="snapshotLoading"
        @selection-change="handleSnapshotSelectionChange"
        class="custom-table"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          v-for="(col, index) in visibleSnapshotColumns"
          :key="index"
          :prop="col.prop"
          :label="col.label"
          :min-width="col.width"
          :sortable="col.sortable"
        >
          <template slot-scope="scope">
            <template v-if="col.prop === 'status'">
              <el-tooltip
                :content="scope.row.statusMessage || ''"
                placement="top"
                :disabled="!scope.row.statusMessage"
              >
                <el-tag
                  :type="getStatusType(scope.row.status)"
                  size="small"
                  effect="light"
                  class="status-tag"
                >
                  <i class="el-icon-loading" v-if="scope.row.status === 'creating'"></i>
                  <i class="el-icon-success" v-else-if="scope.row.status === 'available'"></i>
                  <i class="el-icon-error" v-else-if="scope.row.status === 'error'"></i>
                  <i class="el-icon-info" v-else></i>
                  {{ getStatusName(scope.row.status) }}
                  <el-progress
                    v-if="scope.row.status === 'creating'"
                    :percentage="scope.row.progress || 0"
                    :show-text="false"
                    :stroke-width="2"
                    class="progress-inline"
                  ></el-progress>
                </el-tag>
              </el-tooltip>
            </template>
            <template v-else-if="col.prop === 'operations'">
              <div class="operation-buttons">
<!--                <el-button-->
<!--                  type="success"-->
<!--                  size="mini"-->
<!--                  plain-->
<!--                  icon="el-icon-refresh-right"-->
<!--                  @click.stop="restoreSnapshot(scope.row)"-->
<!--                  :disabled="scope.row.status === 'creating'"-->
<!--                  class="action-button"-->
<!--                >恢复</el-button>-->
                <el-button
                  type="danger"
                  size="mini"
                  plain
                  icon="el-icon-delete"
                  @click.stop="deleteSnapshot(scope.row)"
                  :disabled="scope.row.status === 'creating'"
                  class="action-button"
                >删除</el-button>
              </div>
            </template>
            <template v-else-if="col.prop === 'created_at' || col.prop === 'updated_at'">
              <span :class="{'highlight': isHighlighted(scope.row[col.prop])}">
                {{ formatDate(scope.row[col.prop]) }}
              </span>
            </template>
            <template v-else>
              <span :class="{'highlight': isHighlighted(scope.row[col.prop])}">
                {{ scope.row[col.prop] }}
              </span>
            </template>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container" v-if="snapshotData.length">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 确认对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :modal="false"
      class="custom-dialog"
    >
      <div class="dialog-content">
        <i class="dialog-icon" :class="getDialogIcon()"></i>
        <span class="dialog-message">{{ dialogMessage }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDialog" :loading="dialogLoading">确定</el-button>
      </span>
    </el-dialog>

    <!-- 列设置对话框 -->
    <el-dialog
      title="磁盘列表显示设置"
      :visible.sync="showColumnSettings"
      width="30%"
      :modal="false"
    >
      <el-checkbox-group v-model="selectedDiskColumns">
        <div class="column-item" v-for="col in allDiskColumns" :key="col.prop">
          <el-checkbox :label="col.prop">{{ col.label }}</el-checkbox>
        </div>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showColumnSettings = false">取消</el-button>
        <el-button type="primary" @click="saveDiskColumnSettings">确定</el-button>
      </span>
    </el-dialog>

    <!-- 快照列设置对话框 -->
    <el-dialog
      title="快照列表显示设置"
      :visible.sync="showSnapshotColumnSettings"
      width="30%"
      :modal="false"
    >
      <el-checkbox-group v-model="selectedSnapshotColumns">
        <div class="column-item" v-for="col in allSnapshotColumns" :key="col.prop">
          <el-checkbox :label="col.prop">{{ col.label }}</el-checkbox>
        </div>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showSnapshotColumnSettings = false">取消</el-button>
        <el-button type="primary" @click="saveSnapshotColumnSettings">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {snapshots, getdisk, snapshotsid, snapdoback, cbrbackdlist, cbrdoback} from '@/api/resell/orderinstance'
import { debounce } from 'lodash'

export default {
  name: 'CloudSnapshot',
  props: {
    currentResource: {
      type: Object,
      default: () => ({})
    },
    resourceList: {
      type: Array,  // 修改为 Array 类型
      default: () => []  // 默认值改为数组
    }
  },
  data() {
    return {
      activeMenu: '3',
      currentPage: 1,
      pageSize: 10,
      total: 100,
      dialogVisible: false,
      dialogTitle: '',
      dialogMessage: '',
      dialogLoading: false,
      currentOperation: null,
      currentRow: null,
      diskLoading: false,
      snapshotLoading: false,
      searchQuery: '',
      statusFilter: '',
      selectedDiskRows: [],
      selectedSnapshots: [],
      showColumnSettings: false,
      showSnapshotColumnSettings: false,

      // 列配置
      allDiskColumns: [
        { prop: 'id', label: '云盘ID', width: '180' },
        { prop: 'serviceTypeName', label: '云盘类型', width: '120' },
        { prop: 'status', label: '状态', width: '100' },
        { prop: 'productSpecDesc', label: '容量', width: '100' },
        { prop: 'projectsName', label: '项目名称', width: '120' },
        { prop: 'operations', label: '操作', width: '120' }
      ],
      selectedDiskColumns: ['id', 'serviceTypeName', 'status', 'productSpecDesc', 'projectsName', 'operations'],

      allSnapshotColumns: [
        { prop: 'volume_id', label: '云盘ID', width: '250', sortable: true },
        { prop: 'id', label: '快照ID', width: '250', sortable: true },
        { prop: 'name', label: '快照名称', width: '250' },
        { prop: 'dedicated_storage_name', label: '专属存储的名称', width: '250' },
        { prop: 'status', label: '状态', width: '120' },
        { prop: 'created_at', label: '创建时间', width: '160', sortable: true },
        { prop: 'updated_at', label: '更新时间', width: '160', sortable: true },
        { prop: 'service_type', label: '服务类型', width: '160', sortable: true },
        { prop: 'operations', label: '操作', width: '160' }
      ],
      selectedSnapshotColumns: ['volume_id', 'id', 'name', 'status', 'created_at', 'updated_at', 'operations'],

      diskData: [
        {
          cloudDiskId: 'd-2zee9onrcjyx4lejxcj0',
          diskType: '系统盘',
          status: '使用中',
          capacity: '80G',
          mountPoint: '/dev/xvda'
        }
      ],
      snapshotData: [], // 设置初始值为空数组
      localCurrentResource: {},  // 本地存储当前选中的资源
      isProcessingRequest: false
    }
  },
  created() {
    this.localCurrentResource = this.currentResource;  // 初始化本地数据属性exportData
    this.refreshDiskData();
    this.debouncedProcessSelectedDisks = debounce(this.processSelectedDisks, 500);
    this.getCbrbackdlist();
  },
  computed: {
    visibleDiskColumns() {
      return this.allDiskColumns.filter(col =>
        this.selectedDiskColumns.includes(col.prop)
      )
    },
    visibleSnapshotColumns() {
      return this.allSnapshotColumns.filter(col =>
        this.selectedSnapshotColumns.includes(col.prop)
      )
    },
    filteredSnapshotData() {
      // 确保 snapshotData 有值，如果没有则返回空数组
      let data = this.snapshotData ? [...this.snapshotData] : []

      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        data = data.filter(item =>
          item.id.toLowerCase().includes(query) ||
          item.name.toLowerCase().includes(query)
        )
      }

      if (this.statusFilter) {
        const statusMap = {
          'creating': '创建中',
          'available': '创建成功',
          'error': '创建失败',
          'deleting': '正在删除',
          'error_deleting': '正在删除',
          'rollbacking': '正在回滚',
          'backing-up': '自动快照',
        }
        data = data.filter(item => item.status === statusMap[this.statusFilter])
      }

      return data
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fetchData() {
      // 实际项目中这里会调用API获取数据
      console.log('Fetching data...')
    },
    refreshDiskData() {
      this.diskLoading = true;
      //这里添加获取云盘数据的API调用
      getdisk(this.localCurrentResource)
        .then(response => {
          // 确保每个磁盘项有唯一ID
          this.diskData = (response.rows || []).map(disk => {
            return {
              ...disk,
              id: disk.id || disk.cloudDiskId || `disk-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
            };
          });
          this.diskLoading = false;
          console.log('磁盘数据加载完成:', this.diskData);

          // 如果之前有选中的行，尝试恢复选中状态
          this.$nextTick(() => {
            if (this.selectedDiskRows && this.selectedDiskRows.length > 0) {
              const selectedIds = this.selectedDiskRows.map(row => row.id);
              this.diskData.forEach(row => {
                if (selectedIds.includes(row.id)) {
                  this.$refs.diskTable.toggleRowSelection(row, true);
                }
              });
            }
          });
        })
        .catch(error => {
          console.error('获取磁盘数据失败:', error);
          this.diskData = [];
          this.diskLoading = false;
          this.$message.error('获取磁盘数据失败');
        });
    },
    getCbrbackdlist() {
      this.currentResource.volume_id=this.selectedDiskRows.resourceId
      cbrbackdlist(this.localCurrentResource)
        .then(response => {
          // 确保每个磁盘项有唯一ID
          this.diskData = (response.rows || []).map(disk => {
            return {
              ...disk,
              id: disk.id || disk.cloudDiskId || `disk-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
            };
          });
          this.diskLoading = false;
          console.log('磁盘数据加载完成:', this.diskData);

          // 如果之前有选中的行，尝试恢复选中状态
          this.$nextTick(() => {
            if (this.selectedDiskRows && this.selectedDiskRows.length > 0) {
              const selectedIds = this.selectedDiskRows.map(row => row.id);
              this.diskData.forEach(row => {
                if (selectedIds.includes(row.id)) {
                  this.$refs.diskTable.toggleRowSelection(row, true);
                }
              });
            }
          });
        })
        .catch(error => {
          console.error('获取硬盘备份数据失败:', error);
          this.diskData = [];
          this.diskLoading = false;
          this.$message.error('获取磁盘数据失败');
        });
    },
    refreshSnapshotData() {
      this.snapshotLoading = true;
      this.getCbrbackdlist();
      // 使用当前选中的资源调用API
      this.currentResource.volume_id=this.selectedDiskRows.resourceId
      snapshots(this.localCurrentResource)
        .then(response => {
          // 确保 response.data 存在，如果不存在则设置为空数组
          console.log(response)
          this.snapshotData = response.rows || [];
          this.total=response.total;
          this.snapshotLoading = false;
          this.$message.success('快照数据刷新成功');
        })
        .catch(error => {
          this.snapshotData = []; // 发生错误时设置为空数组
          this.snapshotLoading = false;
          this.$message.error('快照数据刷新失败：' + error.message);
        });
    },
    createSnapshot(row) {
      this.dialogTitle = '创建快照'
      this.dialogMessage = `确定要为云盘 ${row.id} 创建快照吗？`
      this.currentOperation = 'create'
      this.currentRow = row
      this.dialogVisible = true
    },
    restoreSnapshot(row) {
      this.dialogTitle = '恢复快照'
      this.dialogMessage = `确定要恢复快照 ${row.id} 吗？此操作将覆盖当前云盘数据！`
      this.currentOperation = 'restore'
      this.currentRow = row
      this.dialogVisible = true
    },
    deleteSnapshot(row) {
      this.dialogTitle = '删除快照'
      this.dialogMessage = `确定要删除快照 ${row.id} 吗？`
      this.currentOperation = 'delete'
      this.currentRow = row
      this.dialogVisible = true
    },
    batchDeleteSnapshots() {
      this.dialogTitle = '批量删除快照'
      this.dialogMessage = `确定要删除选中的 ${this.selectedSnapshots.length} 个快照吗？`
      this.currentOperation = 'batchDelete'
      this.dialogVisible = true
    },
    confirmDialog() {
      this.dialogLoading = false
      if (this.currentOperation === 'create') {
        this.currentResource.volume_id=this.currentRow.resourceId
        console.log(this.currentResource)
        snapdoback(this.currentResource).then(response => {
          if (response.code==200) {
            this.$message.success('快照创建成功')
          } else {
            this.$message.error('快照创建失败')
          }
        })
        // this.currentResource.vault_id=this.currentRow.resourceId
        // cbrdoback(this.currentResource).then(response => {
        //   if (response.code == 200) {
        //     this.$message.success('云硬盘备份成功')
        //   } else {
        //     this.$message.error('云硬盘备份失败')
        //   }
        // })
      } else if (this.currentOperation === 'restore') {

      } else if (this.currentOperation === 'delete') {

      } else if (this.currentOperation === 'batchDelete') {

      }
      this.dialogVisible = false
    },
    handleDiskSelectionChange(selection) {
      console.log('Selection change triggered:', selection);
      this.selectedDiskRows = selection;

      // 使用防抖函数处理选择
      if (selection && selection.length > 0) {
        this.debouncedProcessSelectedDisks(selection);
      } else {
        // 没有选中任何磁盘，清空快照数据
        this.snapshotData = [];
        this.total = 0;
      }
    },
    handleSnapshotSelectionChange(selection) {
      this.selectedSnapshots = selection
    },
    handleSearchClear() {
      this.searchQuery = ''
    },
    handleStatusFilterChange() {
      // 状态筛选变化时的处理
    },
    getStatusType(status) {
      const statusMap = {
        'creating': 'creating',
        'available': 'success',
        'error': 'failed'
      }
      return statusMap[status] || 'info'
    },
    getStatusName(status) {
      const statusMap = {
        'creating': '创建中',
        'available': '创建成功',
        'error': '创建失败',
        'deleting': '正在删除',
        'error_deleting': '正在删除',
        'rollbacking': '正在回滚',
        'backing-up': '自动快照',
      }
      return statusMap[status] || 'info'
    },
    isHighlighted(value) {
      if (!this.searchQuery) return false
      return typeof value === 'string' &&
        value.toLowerCase().includes(this.searchQuery.toLowerCase())
    },
    saveDiskColumnSettings() {
      this.showColumnSettings = false
      // 实际项目中可能需要保存到本地存储或后端
    },
    saveSnapshotColumnSettings() {
      this.showSnapshotColumnSettings = false
      // 实际项目中可能需要保存到本地存储或后端
    },
    // 处理选中的磁盘
    processSelectedDisks(selection) {
      console.log('Processing selected disks:', selection);

      // 如果已经在处理请求，则不再发起新请求
      if (this.isProcessingRequest) {
        console.log('Request already in progress, skipping...');
        return;
      }

      if (selection && selection.length > 0) {
        // 设置处理标志
        this.isProcessingRequest = true;

        // 显示加载状态
        this.snapshotLoading = true;

        // 确保只使用第一个选中的磁盘
        const firstDisk = selection[0];
        this.currentResource.volume_id = firstDisk.resourceId;

        console.log('Requesting snapshots for disk:', firstDisk.id);

        // 调用API
        snapshots(this.currentResource)
          .then(response => {
            console.log("快照数据响应:", response);
            if (response.code == 200) {
              this.snapshotData = response.rows || [];
              this.total = response.total || (response.rows ? response.rows.length : 0);
              this.$message.success('获取快照数据成功');
            } else {
              this.snapshotData = [];
              this.total = 0;
              this.$message.info(response.msg || '未找到相关快照数据');
            }
          })
          .catch(error => {
            console.error("获取快照失败:", error);
            this.snapshotData = [];
            this.total = 0;

            // 只在非重复提交错误时显示错误消息
            if (!error.message || !error.message.includes('数据正在处理')) {
              this.$message.error("获取快照数据失败: " + (error.message || '未知错误'));
            }
          })
          .finally(() => {
            // 重置处理标志和加载状态
            this.isProcessingRequest = false;
            this.snapshotLoading = false;
          });
      } else {
        // 没有选中任何磁盘，清空快照数据
        this.snapshotData = [];
        this.total = 0;
      }
    },
    // 添加一个手动选择磁盘的方法，用于测试
    selectFirstDisk() {
      if (this.diskData && this.diskData.length > 0) {
        this.$refs.diskTable.toggleRowSelection(this.diskData[0], true);
      }
    },
    // 修改行点击处理函数
    handleRowClick(row, column, event) {
      console.log('Row clicked:', row);

      // 如果点击的是复选框列或操作列，不做额外处理
      if (column.type === 'selection' || column.property === 'operations') {
        return;
      }

      // 如果点击的是按钮或其子元素，不做额外处理
      if (event.target.tagName === 'BUTTON' ||
          event.target.closest('button') ||
          event.target.tagName === 'I' ||
          event.target.closest('.el-tooltip')) {
        return;
      }

      // 切换行的选中状态
      this.$refs.diskTable.toggleRowSelection(row);
    },
    // 添加日期格式化方法
    formatDate(dateString) {
      if (!dateString) return '--';
      const date = new Date(dateString);
      return date.toLocaleString();
    },
    // 获取对话框图标
    getDialogIcon() {
      switch (this.currentOperation) {
        case 'create':
          return 'el-icon-camera';
        case 'restore':
          return 'el-icon-refresh-right';
        case 'delete':
        case 'batchDelete':
          return 'el-icon-delete';
        default:
          return 'el-icon-question';
      }
    },
  },
  mounted() {
    // 在组件挂载后添加一个测试按钮
    console.log('Cloud Snapshot component mounted');
  }
}
</script>

<style scoped>
.cloud-snapshot-container {
  padding: 0px;
}

.section {
  margin-bottom: 24px;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.section:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.section-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.header-left {
  display: flex;
  flex-direction: column;
}

.section-title {
  margin: 0;
  font-size: 18px;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.section-subtitle {
  margin-top: 6px;
  color: #909399;
  font-size: 14px;
}

.header-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

.search-container {
  display: flex;
  gap: 12px;
}

.search-input {
  width: 220px;
}

.status-filter {
  width: 140px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.warning-icon {
  color: #e6a23c;
  font-size: 16px;
}

.badge {
  background-color: #409EFF;
  color: white;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 12px;
  margin-left: 8px;
}

.highlight-text {
  color: #409EFF;
  font-weight: 500;
}

.custom-table {
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.custom-table ::v-deep .el-table__header-wrapper th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: 600;
}

.custom-table ::v-deep .el-table__row:hover {
  background-color: #ecf5ff;
}

.status-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 4px;
}

.cell-content {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.action-button {
  padding: 6px 12px;
  font-size: 12px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #909399;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  color: #dcdfe6;
}

.empty-text {
  font-size: 16px;
  margin-bottom: 8px;
}

.empty-subtext {
  font-size: 14px;
  color: #c0c4cc;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.dialog-content {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}

.dialog-icon {
  font-size: 24px;
  color: #409EFF;
}

.dialog-message {
  font-size: 16px;
  line-height: 1.5;
}

.progress-inline {
  display: inline-block;
  width: 60px;
  margin-left: 8px;
  vertical-align: middle;
}

.highlight {
  background-color: rgba(255, 230, 0, 0.2);
  border-radius: 2px;
  padding: 0 2px;
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
  .header-right {
    flex-direction: column;
    gap: 12px;
  }

  .search-container {
    width: 100%;
  }

  .search-input,
  .status-filter {
    width: 100%;
  }

  .action-buttons {
    width: 100%;
  }

  .action-buttons .el-button {
    flex: 1;
  }
}

@media screen and (max-width: 768px) {
  .cloud-snapshot-container {
    padding: 12px;
  }

  .section {
    padding: 16px;
  }

  .section-header {
    flex-direction: column;
    gap: 16px;
  }

  .header-right {
    width: 100%;
  }
}
</style>
